<template>
  <div>
    <el-container class="box">
      <el-header style="text-align: right; font-size: 14px">
        <h2 class="title">{{ this.MyData.title }}</h2>
        <span style="color: #FFFFFF">{{ username }}</span>
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px;color: #FFFFFF"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="username!=='游客'"><a href="javascript:" @click="logout">退出系统</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="username==='游客'"><a href="#/login">点我登录</a></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']" text-color="w">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i><span class="texts">系统菜单</span></template>
              <el-menu-item index="1-0">
                <router-link to="/home">主页</router-link>
              </el-menu-item>
              <el-menu-item index="1-1">
                <router-link to="/category">类别管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <router-link to="/user">用户管理</router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 中心内容 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
<!--    <el-container>-->
<!--      <el-header>Header</el-header>-->
<!--      <el-container>-->
<!--        <el-aside width="200px">Aside</el-aside>-->
<!--        <el-main>Main</el-main>-->
<!--      </el-container>-->
<!--    </el-container>-->
  </div>
</template>

<script>
// import { getUser } from '@/api/login';

export default {
  name: 'Layout',
  data() {
    return {
      username: '游客'
    }
  },
  methods: {
    logout() {
      window.localStorage.removeItem('username');
      this.username = '游客'
      // if (username) {
      //   logout(token).then(res => {
      //     localStorage.removeItem('token');
      //     this.username = '游客';
      //     this.userInfo();
      //   }).catch(err => {
      //     this.$message.error('操作异常,请稍后再试!')
      //     console.log(err)
      //   });
      // }
    },
    // 获取登录用户信息
    userInfo() {
      const name = window.localStorage.getItem('username')
      // alert(name)
      if (name != null) {
        this.username = name
      } else {
        this.username = '游客'
      }
    }
  },
  created() {
    this.userInfo();
  }
}
</script>

<style scoped>
.el-header {
  /*background-color: #B3C0D1;*/
  color: #333;
  line-height: 60px;
}
.title{
  position: absolute;
  left: 700px;
  top: -20px;
}
.box {
  background: url("../assets/images/backgroud.png") no-repeat center;
  display: flex;
  height: 100vh;
}
.el-main{
  background-color: rgba(255,255,255,0.8);
  border-radius: 5px;
}
::v-deep .el-menu{
  background-color: transparent;
  border: none;
}
.el-icon-message,.texts{
  color: white;
}
::v-deep .el-menu-item{
  padding: 0px;
}
.el-menu-item a{
  color: white;
  text-decoration: none;
  font-size: 16px;
}
</style>
